
class DetailList {
    constructor() {
        this.Shop()//商品配置的操作更新
        this.shopGo()//添加本地存储购物车商品
    }
    init() {

        //获取对应传递的sid图片进行渲染
        let shopId = location.search.substring(5)
        $.ajax({
            url: 'http://127.0.0.1/SAMSUNGproject/backend/detail.php',
            get: "get",
            dataType: 'json',
            data: {
                sid: shopId
            }
        }).then((result) => {
            // console.log(result.piclist);
            $('.item_L_minBox_minImg img').attr('src', result.url)
            $('.item_L_minBox_maxImg img').attr('src', result.url)
            $('.base_title_header_t').html(result.title)
            $('.t2_price').html(`￥${result.price}`)

            //渲染小图：
            let picimg = result.piclist.split(',')
            // console.log(picimg);
            let str = ''
            $.each(picimg, (index, url) => {
                str += `
                <li><img src="${url}" alt=""></li>
                `
            })
            $('.item_shops_minImg').append(str)//添加小图
            $('.item_shops_minImg').css({
                width: parseInt($('.item_shops_minImg li').length) * $('.item_shops_minImg li').eq(0).outerWidth() + 10
            })
            //滑入小图上方大图跟随鼠标划入修改上方图的url
            $('.item_shops_minImg li').hover(function () {
                let dqimgtu = $(this).find('img').attr('src')
                $('.item_L_minBox_minImg img').attr('src', dqimgtu)
                $('.item_L_minBox_maxImg img').attr('src', dqimgtu)
                $(this).addClass('active').siblings().removeClass('active')
            })
            //点击按钮让图片移动
            // 左边
            $('.last_btn').on('click', function () {
                let zongW = $('.item_shops_minImg li').eq(0).width() * $('.item_shops_minImg li').length
                let oneWidth = $('.item_shops_minImg li').eq(0).width()
                console.log($('.item_shops_minImg').css('left'));
                if ($('.item_shops_minImg').css('left') < 0) {
                    oneWidth = 0
                }
                $('.item_shops_minImg').stop(true).animate({
                    left: 0
                })
            })
            // 右边
            $('.next_btn').on('click', function () {
                let zongW = $('.item_shops_minImg li').eq(0).width() * $('.item_shops_minImg li').length
                let oneWidth = $('.item_shops_minImg li').eq(0).width()
                console.log(oneWidth);
                let shuliang = $('.item_shops_minImg li').length - 5
                if (shuliang !== 5) {
                    shuliang = 5
                }
                let yidong = -oneWidth * shuliang
                $('.item_shops_minImg').stop(true).animate({
                    left: yidong
                })
            })
        })
        //放大镜效果实现：
        $('.shopDetail_item_minBox').hover(function () {
            $('.item_L_minBox_minF').show()//进入镜子显示
            $('.shopDetail_item_maxBox').show()//进入大图整块显示
            //因为镜子移动的距离和大图移动的距离是比例移动，需要求出镜子的比例宽高
            let jzWidth = parseInt(($('.shopDetail_item_minBox').width() / $('.item_L_minBox_maxImg').width()) * $('.shopDetail_item_maxBox').width())

            let jzHeight = parseInt(($('.shopDetail_item_minBox').height() / $('.item_L_minBox_maxImg').height()) * $('.shopDetail_item_maxBox').height())

            //  设置镜子的比例的宽高
            $('.item_L_minBox_minF').css({
                width: jzWidth,
                height: jzHeight
            })
            let Bl = parseFloat($('.shopDetail_item_maxBox').width() / $('.item_L_minBox_minF').width())
            // console.log(Bl);
            $('.shopDetail_item_minBox').on('mousemove', function (e) {
                //控制镜子不要移出去：
                let JZleft = e.pageX - $('.shopDetail_item_minBox').offset().left - ($('.item_L_minBox_minF').width() / 2)

                let JZtop = e.pageY - $('.shopDetail_item_minBox').offset().top - ($('.item_L_minBox_minF').height() / 2)
                // console.log(JZleft);
                // console.log(JZtop);
                if (JZleft <= 0) {
                    JZleft = 0
                } else if (JZleft >= $('.shopDetail_item_minBox').width() - $('.item_L_minBox_minF').width()) {
                    JZleft = $('.shopDetail_item_minBox').width() - $('.item_L_minBox_minF').width()
                }
                if (JZtop <= 0) {
                    JZtop = 0
                } else if (JZtop >= $('.shopDetail_item_minBox').height() - $('.item_L_minBox_minF').height()) {
                    JZtop = $('.shopDetail_item_minBox').height() - $('.item_L_minBox_minF').height()
                }
                $('.item_L_minBox_minF').css({
                    left: JZleft,
                    top: JZtop
                })

                $('.item_L_minBox_maxImg').css({
                    left: -JZleft * Bl,
                    top: -JZtop * Bl
                })
            })
            //鼠标进入镜子跟者鼠标走
        }, function () {
            $('.item_L_minBox_minF').hide()//进入镜子显示
            $('.shopDetail_item_maxBox').hide()//进入大图整块显示
        })
    }
    // 商品详细信息渲染
    Shop() {
        //加入购物车的商品信息渲染，获取地址栏id查询数据库响应数据进行渲染
        //所有数据接口： http://127.0.0.1/SAMSUNGproject/backend/allCom.php
        $.ajax({
            url: 'http://127.0.0.1/SAMSUNGproject/backend/allCom.php',
            method: 'get',
            dataType: 'json'
        }).then((result) => {
            // console.log(result);
            let sid = location.search.substring(5)
            $.each(result, function (index, element) {
                // console.log(element.sid);
                if (element.sid === sid) {
                    // console.log(element);
                    $('.buy_Bar_item_name').html(element.title)
                    $('.buy_moneys span').html("￥" + element.price)

                    if ($('.buy_Bar_item_name').html().length > 10) {

                        let tLength = $('.buy_Bar_item_name').html().substring(0, 30) + "..."

                        $('.buy_Bar_item_name').html(tLength)
                    }
                }
            })
        })
        //默认机型配置
        let txts = $('.jx_content').eq(0).text()
        let txtindex = $('.jx_content').eq(0).text().indexOf('￥')
        $('.buy_Bar_item_txt_pz span').eq(0).html(txts.substring(0, txtindex))

        //默认内存配置
        $('.buy_Bar_item_txt_pz span').eq(1).html($('.nc_content ').eq(0).text())

        //默认Color颜色配置
        console.log();
        let ColorPz = $('.item_part_color').eq(0).find('div').eq(1).css('backgroundColor')
        $('.buy_Bar_item_txt_color span i').css({
            backgroundColor: ColorPz
        })

        //商品机型配置
        $('.base_wreper_jx_part_btn ').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active')
            console.log($(this).find('.jx_content ').text());
            let shopTxt = $(this).find('.jx_content ').text()
            let shopIndex = $(this).find('.jx_content ').text().indexOf('￥')
            // console.log(shopTxt.substring(0, shopIndex));
            $('.buy_Bar_item_txt_pz span').eq(0).html(shopTxt.substring(0, shopIndex))
        })
        //商品内存配置
        $('.base_wreper_nc_part_btn ').on('click', function () {
            console.log($(this));
            $(this).addClass('active').siblings().removeClass('active')
            $('.buy_Bar_item_txt_pz span').eq(1).html($(this).find('.nc_content ').text())
        })
        //商品颜色
        $('.item_part_color')

        $('.item_part_color ').on('click', function () {
            console.log($(this));
            $(this).addClass('active').siblings().removeClass('active')
            $('.buy_Bar_item_txt_color span i').css({
                backgroundColor: $(this).find('div').eq(1).css('backgroundColor')
            })
        })
    }
    //点击加入购物车
    shopGo() {
        //点击进行++商品数量以及小计
        $('.buy_Bar_money').on('click', '.buy_const_2', function () {
            let nums = parseInt($('.buy_const_c').html())
            nums++
            $('.buy_const_c').html(nums)
            // console.log($(this).parents('.buy_content').siblings('.shopDetail_content_item').find('.shopDetail_item_R').find('.t2_price').html().substring(1));
            $(this).parents('.buy_Bar_money').find('.buy_moneys span').html(xiaoJ($(this)))
        })
        //点击进行--商品数量以及小计
        $('.buy_Bar_money').on('click', '.buy_const_1', function () {
            let nums = parseInt($('.buy_const_c').html())
            nums--
            if (nums < 1) {
                nums = 1
            }
            $('.buy_const_c').html(nums)
            $(this).parents('.buy_Bar_money').find('.buy_moneys span').html(xiaoJ($(this)))
        })

        //定义计算小计函数
        function xiaoJ(obj) {
            let danJ = parseInt(obj.parents('.buy_content').siblings('.shopDetail_content_item').find('.shopDetail_item_R').find('.t2_price').html().substring(1))
            let sL = parseInt(obj.siblings('.buy_const_c').html())
            return sL * danJ
        }
        let shopSList = {
        }
        //点击将商品添加到本地存储
        //判断第一次是否有存储的值，有值则转换为对象格式方便下面统计商品个数
        if (localStorage.getItem('shopS')) {
            shopSList = JSON.parse(localStorage.getItem('shopS'))
        } else {
            shopSList = {}
        }
        $('.buy_btn').on('click', function () {
            console.log(shopSList);
            let sid = location.search.substring(5)

            //获取当前sid
            if (Object.keys(shopSList).includes("cert_" + sid)) {//判断当前id是否存在，存在进行原本的值增加数量
                shopSList["cert_" + sid] = shopSList["cert_" + sid] + parseInt($('.buy_const_c').html())
            } else {//没有值则等于当前页面数量
                shopSList["cert_" + sid] = parseInt($('.buy_const_c').html())
            }
            localStorage.setItem('shopS', JSON.stringify(shopSList))//需要重新上传本地存储


            $('.nubus').css('display', 'block')
            $('.nubus').animate({
                opacity: 1
            })
            // location.reload()
        })
        //划过当前btn改变样式
        $('.buy_btn').hover(function () {
            $(this).addClass('active')
        }, function () {
            $(this).removeClass('active')
        })
        //划过当前加入购物车成功,滑过效果
        $('.gg').hover(function () {
            $(this).addClass('active')
        }, function () {
            $(this).removeClass('active')
        })
        //点击当前再逛一逛,关闭弹窗
        $('.gg').on('click', function () {
            $('.nubus').css('display', 'none')
            location.reload()
        })

        $('.icon-chahao1').on('click', function () {
            $('.nubus').css('display', 'none')
        })
        //点击去购物车购买
        $('.jiarugouwuche').on('click', function () {
            location.href = 'http://127.0.0.1/SAMSUNGproject/frontend/cartlist.html'
        })

        //点击立即购买，前往购物车进行购买

        $('.car_btn').on('click', function () {
            location.href = 'http://127.0.0.1/SAMSUNGproject/frontend/cartlist.html'
        })
        //当滚动条的距离大于了268px让元素固定定位fixed top :0px
        $(window).on('scroll', function () {
            //报错元素 ， 修复
            let tops = $('.shopDetail_content_item').offset().top
            if ($(this).scrollTop() >= tops) {
                $('.shopDetail_item_L').css({
                    position: 'fixed',
                    top: 0,
                    
                })
            } else {
                $('.shopDetail_item_L').css({
                    position: 'relative',
                    top: 0
                })
            }
            if ($(this).scrollTop() >= ($('.shopDetail_content_item').offset().top + $('.shopDetail_content_item').height() + 10) - $('.shopDetail_item_L').height()) {
                $('.shopDetail_item_L').css({
                    position: 'relative',
                    top: 300
                })
            }
        })
    }
}
export {
    DetailList
}